.ActivityProducts {
  width: 100%;
  background: #f2f2f3;

  .products-top {
    height: 161px;
    background: #ffffff;
    margin-bottom: 20px;

    display: flex;
    flex-direction: column;

    padding: 0 24px;

    .store-info {
      display: flex;
      flex-direction: row;

      margin-top: 34px;

      .logo {
        width: 94px;
        height: 94px;
        border-radius: 10px;

        margin-right: 30px;
      }

      .store-right {
        display: flex;
        flex-direction: column;
      }

      .store-name {
        height: 48px;
        font-size: 34px;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.85);
        line-height: 48px;

        margin-bottom: 13px;
      }

      .store-star {
        display: flex;
        align-items: center;

        .txt {
          height: 37px;
          font-size: 26px;
          font-weight: 400;
          color: #333333;
          line-height: 37px;

          margin-right: 10px;
        }

        .start {
          width: 168px;
          height: 30px;
          position: relative;
          overflow-x: hidden;
          .backL {
            width: 100%;
            height: 100%;
            display: flex;
          }
          .faceL {
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            overflow: hidden;
            display: flex;
          }
          .sIcon {
            width: 168px;
            height: 30px;
            flex-shrink: 0;
          }
        }

        .comment {
          height: 40px;
          font-size: 28px;
          font-weight: 400;
          color: #a3a3a3;
          line-height: 40px;

          margin-left: 38px;
        }
      }
    }

    .sort-filter {
      margin-top: 33px;

      display: flex;
      justify-content: space-between;

      .filter-item {
        width: 340px;
        height: 64px;
        background: #f5f5f5;
        border-radius: 40px;

        display: flex;
        justify-content: center;
        align-items: center;

        &.active {
          background: #6d86c4;

          .filter-item-txt {
            font-weight: bold;
            color: #ffffff;
          }

          .filter-item-badge {
            height: 10px;
          }
        }

        .filter-item-txt {
          height: 42px;
          font-size: 30px;
          font-weight: 400;
          color: #333333;
          line-height: 42px;
        }

        .filter-item-badge {
          width: 14px;
          height: 27px;
          margin-left: 10px;
        }
      }
    }
  }

  .activity-info {
    margin: 0 0 20px 24px;

    font-size: 32px;
    font-weight: 400;
    color: #666666;
    line-height: 45px;
  }

  .product-products {
    width: 100%;

    .product {
      width: 702px;
      margin: 0 auto 20px;
      display: flex;
      background: #ffffff;
      border-radius: 15px;
      box-sizing: border-box;
      padding: 20px 30px 6px 20px;

      position: relative;

      .left {
        width: 184px;

        position: relative;

        .product-img {
          width: 184px;
          height: 184px;
          border-radius: 10px;
        }
      }

      .off-right {
        flex: 1;
        margin-left: 16px;
        margin-bottom: 7px;

        height: 100%;

        .name,
        .intro {
          overflow: hidden;
          word-break: keep-all;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .name {
          height: 42px;
          font-size: 30px;
          font-weight: bold;
          color: #333333;
          line-height: 42px;

          max-width: 437px;
          margin-top: 2px;
        }

        .intro {
          max-width: 437px;
          margin-top: 10px;

          height: 37px;
          font-size: 26px;
          font-weight: 400;
          color: #666666;
          line-height: 37px;
        }

        .month-sale {
          margin-top: 10px;

          height: 30px;
          font-size: 22px;
          font-weight: 400;
          color: #666666;
          line-height: 30px;
        }

        .origin-price {
          margin-top: 15px;

          display: flex;
          align-items: center;

          .prefix {
            height: 28px;
            font-size: 20px;
            font-weight: 400;
            color: #999999;
            line-height: 28px;

            margin-right: 10px;
          }

          .price {
            height: 28px;
            font-size: 20px;
            font-weight: 400;
            color: #999999;
            line-height: 28px;

            text-decoration: line-through;
          }
        }

        .off-price {
          display: flex;
          align-items: center;

          margin-top: 4px;

          .tag {
            width: 80px;
            height: 30px;
            border-radius: 4px;
            border: 1.05px solid #ef5721;

            margin-right: 10px;

            display: flex;
            align-items: center;
            justify-content: center;

            .txt {
              height: 30px;
              font-size: 22px;
              font-weight: 700;
              line-height: 30px;
            }
          }

          .unit {
            margin-right: 6px;
          }

          .unit,
          .price {
            height: 55px;
            font-size: 34px;
            font-weight: bold;
            color: #333333;
            line-height: 48px;
          }
        }

        .buy-now {
          width: 150px;
          height: 58px;
          border-radius: 29px;

          display: flex;
          justify-content: center;
          align-items: center;

          position: absolute;
          top: 146px;
          right: 21px;

          &.sold-out {
            background: #bfbfbf !important;
          }

          .txt {
            height: 40px;
            font-size: 28px;
            font-weight: bold;
            color: #ffffff;
            line-height: 40px;
          }
        }
      }

      .right {
        flex: 1;
        margin-left: 16px;
        height: 100%;

        .info {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;

          .name,
          .intro {
            overflow: hidden;
            word-break: keep-all;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .name {
            height: 42px;
            font-size: 30px;
            font-weight: bold;
            color: #333333;
            line-height: 42px;

            max-width: 437px;
            margin-top: 2px;
          }

          .intro {
            max-width: 380px;
            margin-top: 10px;
            height: 37px;
            font-size: 26px;
            font-weight: 400;
            color: #999999;
            line-height: 37px;
          }

          .pricePay {
            margin-top: 10px;
            width: 100%;
            height: 59px;
            display: flex;
            align-items: center;

            .realPrice {
              height: 59px;
              font-size: 42px;
              font-weight: bold;
              color: #333333;
              line-height: 59px;
              .unit {
                // margin-right: 8px;
              }
            }

            .saleNum {
              margin-left: 10px;
              height: 33px;
              font-size: 24px;
              font-weight: 400;
              color: #999999;
              line-height: 33px;
              word-break: keep-all;
            }
          }

          .coupInfo {
            margin-top: 13px;
            margin-right: -10px;

            display: flex;
            flex-wrap: wrap;

            .infoBtn {
              margin-right: 10px;
              margin-bottom: 16px;

              height: 26px;
              border-radius: 2px;

              display: flex;
              justify-content: center;
              align-items: center;

              .txt {
                padding: 0 8px;

                font-size: 20px;
                font-weight: 400;
              }
            }
          }

          .add {
            position: absolute;
            top: 90px;
            right: 30px;
            width: 62px;
            height: 62px;
          }

          .sold-out {
            position: absolute;
            top: 89px;
            right: 24px;
            width: 124px;
            height: 124px;
          }
        }
      }
    }
  }

  .bottom-info {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;

    z-index: 9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px 0 60px;

    background: #ffffff;
    height: 120px;
    border: 1px solid rgba(0, 0, 0, 0.1);

    .left {
      width: 436px;
      display: flex;
      flex-direction: column;

      .summary-wrap {
        display: flex;
        align-items: center;
      }

      .summary-prefix {
        height: 33px;
        font-size: 24px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.85);
        line-height: 33px;

        margin-right: 10px;
      }

      .summary {
        height: 53px;
        font-size: 38px;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.85);
        line-height: 53px;
      }
      .info {
        height: 33px;
        font-size: 24px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.85);
        line-height: 33px;
        .num {
          color: #ef5721;
        }
      }
    }

    .right {
      width: 230px;
      height: 82px;
      border-radius: 41px;

      display: flex;
      justify-content: center;
      align-items: center;

      .txt {
        font-size: 28px;
        color: white;
      }
    }
  }

  .end {
    width: 100%;
    height: 28px;
    margin: 6px 0 16px 0;
    display: flex;
    justify-content: center;
    font-size: 20px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.25);
    line-height: 28px;
  }
}
